<template>
  <div class="container">
    <div class="page-top "></div>
    <view class="gybody">
      <view class="lyfk user-update">
        <ul class="hzly">
          <li>
            <span class="bs">*车辆名称</span>
            <input placeholder="请输入车辆名称" v-model="carData.car_name" class="input">
          </li>
          <li>
            <span class="bs">*是否默认(订单默认关联车辆)</span>
            <view>
              <van-radio-group
                :value="carData.is_default"
                @change="onDefaultChange"
                direction="horizontal"
              >
                <van-radio :name="1">是</van-radio>
                <van-radio :name="0">否</van-radio>
              </van-radio-group>
            </view>
            <div style="clear:both"></div>
          </li>
          <li>
            <span class="bs">*车牌号码</span>
            <input placeholder="请输入车牌号码" v-model="carData.car_no" maxlength="18"
                   class="input">
          </li>
          <li>
            <span class="bs">*车辆颜色</span>
            <input placeholder="请输入车辆颜色" v-model="carData.color" maxlength="18"
                   class="input">
          </li>
          <li>
            <!-- todo 图片上传 -->
            <span class="bs">*车辆照片</span>
            <van-image width="100" height="100" @click="onUploadImg" :src="carData.img"/>
          </li>
        </ul>
        <view class="lyfk-tj">
          <vat-button @click="submitData">保存</vat-button>
        </view>
      </view>
    </view>

  </div>
</template>

<script>
import {doResponse, showToast, uploadImg} from "../../../../requests/tools";
import {addCar, getCar, updateCar} from "../../../../requests/merchant/car";

var $this;
export default {
  name: 'CarAddContainer',
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      carData: {
        car_no: "", // 车牌号
        car_name: "", // 车辆名称
        color: "",// 车辆颜色
        is_default: 1,//是否默认
        img: ""// 车辆图片
      },
      style: "background-color: #6c77ad;color: 'white';",
      tmpl_img: ""
    }
  },
  // 方法集合
  methods: {

    /**
     * 图片上传
     * @param event
     */
    onUploadImg(event) {
      uploadImg($this);
      let intv = setInterval(() => {
        if ($this.tmpl_img) {
          $this.carData.img = $this.tmpl_img;
          clearInterval(intv)
        }
      }, 1000)
    },

    /**
     * 切换是否默认
     * @param e
     */
    onDefaultChange(e) {
      $this.carData.is_default = e.mp.detail;
    },

    /**
     * 提交数据
     */
    submitData() {
      let rawData = $this.carData;
      if (rawData.id) {// 修改
        // 更新车辆信息
        updateCar(rawData.id, rawData).then(res => {
          doResponse(res)
        })
      } else { // 新增
        // 添加车辆信息
        addCar(rawData).then(res => {
          doResponse(res)
        })
      }

    },
    /**
     * 获取车辆详情
     * @param id
     */
    onGetCar(id) {
      getCar(id).then(res => {
        $this.carData = res.data;
      })
    }

  },
  created() {
    $this = this;
  },
  onLoad(options) {
    if (options.id){
      this.onGetCar(options.id)
    }
  }
}
</script>

<style>

@import "index.css";
</style>
